<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
v-on用于绑定事件，调用方法，可以传递参数
<div id="app">
    <input type="button" value="点击时执行" v-on:click="doClick()">
    <input type="button" value="鼠标移入执行" v-on:mouseenter="doMouse()">
    <input type="button" value="双击执行" v-on:dblclick="doDoubleClick()">
    <!--可以用@代替v-on:-->
    <input type="button" value="双击执行" @dblclick="doDoubleClick()">
    <h4>当前食物：{{food}}</h4>
    <input type="button" value="好吃" @click="changeFood()">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            food:"冰淇淋炒培根"
        },
        methods:{
            //方法名:方法逻辑
            doClick:function () {
                alert("您单击了");
            },
            doMouse:function () {
                alert("鼠标移动到按钮上了哦");
            },
            doDoubleClick:function () {
                alert("您双击了");
            },
            changeFood:function () {
                this.food += "好吃的很";
            }
        }
    });
</script>
</body>
</html>